<template>
  <el-dialog
    v-model="newModelValue"
    v-bind="$attrs"
    ref="dialogRef"
    :close-on-click-modal="closeOnClickModal"
  >
    <div v-if="errorIcon" class="error-tip">
      <el-icon color="#FFAC28"><WarningFilled /></el-icon>
    </div>
    <slot></slot>
    <template v-if="isFooter" #footer>
      <span class="dialog-footer">
        <el-button v-if="cancelText" @click="close">{{ cancelText }}</el-button>
        <el-button
          v-if="confirmText"
          :loading="loading"
          type="primary"
          @click="confirm"
        >
          {{ confirmText }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, nextTick, computed, useAttrs, onUnmounted } from "vue";
import { WarningFilled } from "@element-plus/icons-vue";
const emits = defineEmits(["update:modelValue", "update:loading"]);
const $attrs = useAttrs();
const props = defineProps({
  // 控制弹框显示隐藏
  modelValue: {
    type: Boolean,
    default: false,
  },
  // 是否显示底部按钮
  isFooter: {
    type: Boolean,
    default: true,
  },
  // 取消按钮文字
  cancelText: {
    type: String,
    default: "取消",
  },
  // 确定按钮文字
  confirmText: {
    type: String,
    default: "确定",
  },
  // 提交按钮是否加载
  loading: {
    type: Boolean,
    default: false,
  },
  // 是否展示error图标
  errorIcon: {
    type: Boolean,
    default: false,
  },
  // 点击遮罩层是否关闭弹框
  closeOnClickModal: {
    type: Boolean,
    default: false,
  },
});
const dialogRef = ref(null);
const newModelValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});
onMounted(() => {
  nextTick(() => {
    dialogRef.value.rendered = true;
  });
});
onUnmounted(() => {
  emits("update:loading", false);
});
// 关闭弹框
const close = () => {
  $attrs.onClose && $attrs.onClose();
  newModelValue.value = false;
};
// 确认操作
const confirm = () => {
  $attrs.onConfirm && $attrs.onConfirm();
};
</script>

<style lang="scss">
.error-tip {
  position: absolute;
  top: 9px;
  left: 0px;
  width: 30px;
  height: 30px;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
</style>
